﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>下拉菜单 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS --> 
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#dropdowns" class="nav-link font-weight-bold"><span>下拉菜单(Dropdowns)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#button-content" class="nav-link"><span>按钮内容</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#positioning" class="nav-link"><span>定位</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#menu-alignment" class="nav-link"><span>菜单对齐</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dropup" class="nav-link"><span>上拉菜单</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#drop-right-or-left" class="nav-link"><span>向左或向右</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#auto-flipping" class="nav-link"><span>自动“翻转”</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#menu-offset" class="nav-link"><span>菜单偏移</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#boundary-constraint" class="nav-link"><span>边界约束</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#split-button-support" class="nav-link"><span>分体式按钮支持</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#split-button-link-support" class="nav-link"><span>分体式按钮链接支持</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#split-button-type" class="nav-link"><span>拆分按钮类型</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#styling-options" class="nav-link"><span>样式选项</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#sizing" class="nav-link"><span>尺寸</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dropdown-color-variants" class="nav-link"><span>下拉颜色变量</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#split-button-color-variant" class="nav-link"><span>拆分按钮颜色变量</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#block-level-dropdowns" class="nav-link"><span>块级下拉菜单</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dropdown-sub-component-color-variants" class="nav-link"><span>下拉子组件颜色变量</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#hidden-caret" class="nav-link"><span>隐藏的插入符</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#lazy-dropdown" class="nav-link"><span>慢速下拉菜单</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#dropdown-supported-sub-components" class="nav-link"><span>下拉菜单支持的子组件</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#b-dropdown-item" class="nav-link"><span>&lt;b-dropdown-item&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#b-dropdown-item-button" class="nav-link"><span>&lt;b-dropdown-item-button&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#b-dropdown-item-divider" class="nav-link"><span>&lt;b-dropdown-item-divider&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#b-dropdown-text" class="nav-link"><span>&lt;b-dropdown-text&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#b-dropdown-form" class="nav-link"><span>&lt;b-dropdown-form&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#b-dropdown-item-group" class="nav-link"><span>&lt;b-dropdown-item-group&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#b-dropdown-item-header" class="nav-link"><span>&lt;b-dropdown-item-header&gt;</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#listening-to-dropdown-changes-via-root-events" class="nav-link"><span>通过 $root 事件监听下拉更改</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#optionally-scoped-default-slot" class="nav-link"><span>可选范围的默认插槽</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>可访问性</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#headers-and-accessibility" class="nav-link"><span>标题和可访问性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#keyboard-navigation" class="nav-link"><span>键盘导航</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#implementation-notes" class="nav-link"><span>实施说明</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#see-also" class="nav-link"><span>另请参阅</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件参考</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-dropdown" class="nav-link"><span>&lt;b-dropdown&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-dropdown-item" class="nav-link"><span>&lt;b-dropdown-item&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-dropdown-item-button" class="nav-link"><span>&lt;b-dropdown-item-button&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-dropdown-divider" class="nav-link"><span>&lt;b-dropdown-divider&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-dropdown-form" class="nav-link"><span>&lt;b-dropdown-form&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-dropdown-text" class="nav-link"><span>&lt;b-dropdown-text&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-dropdown-group" class="nav-link"><span>&lt;b-dropdown-group&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-dropdown-header" class="nav-link"><span>&lt;b-dropdown-header&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">下拉菜单</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">下拉菜单(Dropdowns)</h1>
<p class="bd-lead">下拉菜单是可切换的上下文覆盖，用于以下拉菜单格式显示链接和操作列表。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>




<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#button-content" class=""><span data-v-811345e6="">Button content</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#positioning" class=""><span data-v-811345e6="">Positioning</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#menu-alignment" class=""><span data-v-811345e6="">Menu alignment</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#dropup" class=""><span data-v-811345e6="">Dropup</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#drop-right-or-left" class=""><span data-v-811345e6="">Drop right or left</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#auto-flipping" class=""><span data-v-811345e6="">Auto "flipping"</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#menu-offset" class=""><span data-v-811345e6="">Menu offset</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#boundary-constraint" class=""><span data-v-811345e6="">Boundary constraint</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#split-button-support" class=""><span data-v-811345e6="">Split button support</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#split-button-link-support" class=""><span data-v-811345e6="">Split button link support</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#split-button-type" class=""><span data-v-811345e6="">Split button type</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#styling-options" class=""><span data-v-811345e6="">Styling options</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#sizing" class=""><span data-v-811345e6="">Sizing</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#dropdown-color-variants" class=""><span data-v-811345e6="">Dropdown color variants</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#split-button-color-variant" class=""><span data-v-811345e6="">Split button color variant</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#block-level-dropdowns" class=""><span data-v-811345e6="">Block level dropdowns</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#dropdown-sub-component-color-variants" class=""><span data-v-811345e6="">Dropdown sub-component color variants</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#hidden-caret" class=""><span data-v-811345e6="">Hidden caret</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#lazy-dropdown" class=""><span data-v-811345e6="">Lazy dropdown</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#dropdown-supported-sub-components" class=""><span data-v-811345e6="">Dropdown supported sub-components</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-dropdown-item" class=""><span data-v-811345e6="">&lt;b-dropdown-item&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-dropdown-item-button" class=""><span data-v-811345e6="">&lt;b-dropdown-item-button&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-dropdown-item-divider" class=""><span data-v-811345e6="">&lt;b-dropdown-item-divider&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-dropdown-text" class=""><span data-v-811345e6="">&lt;b-dropdown-text&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-dropdown-form" class=""><span data-v-811345e6="">&lt;b-dropdown-form&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-dropdown-item-group" class=""><span data-v-811345e6="">&lt;b-dropdown-item-group&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-dropdown-item-header" class=""><span data-v-811345e6="">&lt;b-dropdown-item-header&gt;</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#listening-to-dropdown-changes-via-root-events" class=""><span data-v-811345e6="">Listening to dropdown changes via $root events</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#optionally-scoped-default-slot" class=""><span data-v-811345e6="">Optionally scoped default slot</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#headers-and-accessibility" class=""><span data-v-811345e6="">Headers and accessibility</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#keyboard-navigation" class=""><span data-v-811345e6="">Keyboard navigation</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#implementation-notes" class=""><span data-v-811345e6="">Implementation notes</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#see-also" class=""><span data-v-811345e6="">See also</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-dropdown" class=""><span data-v-811345e6="">&lt;b-dropdown&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-dropdown-item" class=""><span data-v-811345e6="">&lt;b-dropdown-item&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-dropdown-item-button" class=""><span data-v-811345e6="">&lt;b-dropdown-item-button&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-dropdown-divider" class=""><span data-v-811345e6="">&lt;b-dropdown-divider&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-dropdown-form" class=""><span data-v-811345e6="">&lt;b-dropdown-form&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-dropdown-text" class=""><span data-v-811345e6="">&lt;b-dropdown-text&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-dropdown-group" class=""><span data-v-811345e6="">&lt;b-dropdown-group&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-dropdown-header" class=""><span data-v-811345e6="">&lt;b-dropdown-header&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code>（或简称为 <code translate="no" class="notranslate text-nowrap">&lt;b-dd&gt;</code>的别名）组件是可切换的上下文覆盖，用于显示链接列表等。 它们是通过单击（或按空格键或在焦点对准时进入）而不是悬停来切换的； 这是一个 <a href="http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/" target="_blank" rel="noopener">有意的设计决定</a> 。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown notranslate">
<div>
<div id="dropdown-1" class="dropdown b-dropdown m-md-2 btn-group">
<button id="dropdown-1__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary">Dropdown Button</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-1__BV_toggle_" class="dropdown-menu">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">First Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Second Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Third Action</a></li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item active">Active action</a></li>
<li role="presentation"><a role="menuitem" target="_self" tabindex="-1" aria-disabled="true" href="#" class="dropdown-item disabled">Disabled action</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-1"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown Button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-md-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span>&gt;</span>First Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span>&gt;</span>Second Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span>&gt;</span>Third Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">active</span>&gt;</span>Active action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="button-content" class="bv-no-focus-ring"><span class="bd-content-title">按钮内容<a class="anchorjs-link" href="#button-content" aria-labelledby="button-content"></a></span></h2>
<p>您可以使用 <code translate="no" class="notranslate text-nowrap">text</code> 属性（如前例所示）自定义下拉按钮的文本，也可以使用 <code translate="no" class="notranslate text-nowrap">button-content</code> 插槽而不是 <code translate="no" class="notranslate text-nowrap">text</code> 属性，<code translate="no" class="notranslate text-nowrap">button-content</code> 槽允许您在按钮内容中使用基本的HTML和图标。</p>
<p>如果 <code translate="no" class="notranslate text-nowrap">text</code> 属性和 <code translate="no" class="notranslate text-nowrap">button-content</code> 插槽同时存在，则 <code translate="no" class="notranslate text-nowrap">button-content</code> 插槽将优先</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-button-content notranslate">
<div>
<div class="dropdown b-dropdown btn-group" id="__BVID__2413">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary" id="__BVID__2413__BV_toggle_">Button text via Prop</button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2413__BV_toggle_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">An item</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another item</a></li>
</ul>
</div>
<div class="dropdown b-dropdown btn-group" id="__BVID__2418">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary" id="__BVID__2418__BV_toggle_"> Custom <strong>Content</strong> with <em>HTML</em> via Slot </button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2418__BV_toggle_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">An item</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another item</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Button text via Prop"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>An item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:button-content</span>&gt;</span>
      Custom <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Content<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span> with <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>HTML<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span> via Slot
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>An item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="positioning" class="bv-no-focus-ring"><span class="bd-content-title">定位<a class="anchorjs-link" href="#positioning" aria-labelledby="positioning"></a></span></h2>
<p>下拉菜单支持各种位置，例如左右对齐，下拉菜单和下拉菜单，并在菜单从可见屏幕区域溢出时支持自动翻转（下拉菜单到下拉菜单，反之亦然）。</p>
<h3 id="menu-alignment" class="bv-no-focus-ring"><span class="bd-content-title">菜单对齐<a class="anchorjs-link" href="#menu-alignment" aria-labelledby="menu-alignment"></a></span></h3>
<p>下拉菜单可以左对齐（默认），也可以相对于其上方的按钮右对齐。要使下拉列表在右侧对齐，请设置 <code translate="no" class="notranslate text-nowrap">right</code> 属性。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-right notranslate">
<div>
<div id="dropdown-left" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-left__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary">Left align</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-left__BV_toggle_" class="dropdown-menu">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
<div id="dropdown-right" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-right__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary">Right align</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-right__BV_toggle_" class="dropdown-menu dropdown-menu-right">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-left"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Left align"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-right"</span> <span class="hljs-attr">right</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Right align"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="dropup" class="bv-no-focus-ring"><span class="bd-content-title">上拉菜单<a class="anchorjs-link" href="#dropup" aria-labelledby="dropup"></a></span></h3>
<p>通过设置 <code translate="no" class="notranslate text-nowrap">dropup</code> 属性，将您的 dropdown 菜单变成为 drop-up 菜单</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-dropup notranslate">
<div>
<div id="dropdown-dropup" class="dropdown b-dropdown m-2 dropup btn-group">
<button id="dropdown-dropup__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary">Drop-Up</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-dropup__BV_toggle_" class="dropdown-menu">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-dropup"</span> <span class="hljs-attr">dropup</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Drop-Up"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="drop-right-or-left" class="bv-no-focus-ring"><span class="bd-content-title">向左或向右<a class="anchorjs-link" href="#drop-right-or-left" aria-labelledby="drop-right-or-left"></a></span></h3>
<p>设置 <code translate="no" class="notranslate text-nowrap">dropright</code> 属性将下拉菜单变成右下拉菜单。或者，通过将 <code translate="no" class="notranslate text-nowrap">dropleft</code> 右道具设置为 true ，</p>
<p><code translate="no" class="notranslate text-nowrap">dropright</code> 优先于 <code translate="no" class="notranslate text-nowrap">dropleft</code>。如果设置了 <code translate="no" class="notranslate text-nowrap">dropup</code> ，则 <code translate="no" class="notranslate text-nowrap">dropright</code> 或 <code translate="no" class="notranslate text-nowrap">dropleft</code> 均无效。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-dropright-dropleft notranslate">
<div>
<div id="dropdown-dropright" class="dropdown b-dropdown m-2 dropright btn-group">
<button id="dropdown-dropright__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary">Drop-Right</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-dropright__BV_toggle_" class="dropdown-menu">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
<div id="dropdown-dropleft" class="dropdown b-dropdown m-2 dropleft btn-group">
<button id="dropdown-dropleft__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary">Drop-Left</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-dropleft__BV_toggle_" class="dropdown-menu">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-dropright"</span> <span class="hljs-attr">dropright</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Drop-Right"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-dropleft"</span> <span class="hljs-attr">dropleft</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Drop-Left"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="auto-flipping" class="bv-no-focus-ring"><span class="bd-content-title">自动“翻转”<a class="anchorjs-link" href="#auto-flipping" aria-labelledby="auto-flipping"></a></span></h3>
<p>默认情况下，下拉菜单可能会根据其在视口中的当前位置翻转到顶部或底部。 要禁用此自动翻转功能，请设置 <code translate="no" class="notranslate text-nowrap">no-flip</code> 属性。</p>
<h3 id="menu-offset" class="bv-no-focus-ring"><span class="bd-content-title">菜单偏移<a class="anchorjs-link" href="#menu-offset" aria-labelledby="menu-offset"></a></span></h3>
<p>想将菜单从切换按钮稍微移开吗？ 然后使用 <code translate="no" class="notranslate text-nowrap">offset</code> 属性指定从切换按钮向右（或在负数时向左）推像素的数量：</p>
<ul>
<li>指定为多个像素：正向表示右移，负向表示左移。</li>
<li>指定以字符串形式传递的CSS单位（即 <code translate="no" class="notranslate text-nowrap">0.3rem</code>，<code translate="no" class="notranslate text-nowrap">4px</code>，<code translate="no" class="notranslate text-nowrap">1.2em</code>，等等）的距离。</li>
</ul>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-offset notranslate">
<div>
<div id="dropdown-offset" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-offset__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary">Offset Dropdown</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-offset__BV_toggle_" class="dropdown-menu">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-offset"</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Offset Dropdown"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="boundary-constraint" class="bv-no-focus-ring"><span class="bd-content-title">边界约束<a class="anchorjs-link" href="#boundary-constraint" aria-labelledby="boundary-constraint"></a></span></h3>
<p>默认情况下，下拉列表在视觉上被限制为其滚动父级，这在大多数情况下都足够了。但是，如果将下拉菜单放在设置了 <code translate="no" class="notranslate text-nowrap">overflow: scroll</code>（或类似）的元素中，下拉菜单在某些情况下可能会被截断。要解决此问题，可以通过边界支柱指定 <code translate="no" class="notranslate text-nowrap">boundary</code> 属性。支持的值为 <code translate="no" class="notranslate text-nowrap">'scrollParent'</code> （默认值），<code translate="no" class="notranslate text-nowrap">'viewport'</code>，<code translate="no" class="notranslate text-nowrap">'window'</code> 或对HTML元素的引用。边界值直接传递到 Popper.js 的 <code translate="no" class="notranslate text-nowrap">boundariesElement</code> 配置选项。</p>
<p><strong>注意：</strong> 当 <code translate="no" class="notranslate text-nowrap">boundary</code> 不是默认的 <code translate="no" class="notranslate text-nowrap">'scrollParent'</code> 值时，样式 <code translate="no" class="notranslate text-nowrap">position: static</code> 将应用于下拉组件的根元素，以便允许菜单从其滚动容器中“跳出”。在某些情况下，这可能会影响下拉式触发器按钮的布局或位置。在这些情况下，您可能需要将下拉列表包装到另一个元素中。</p>
<h2 id="split-button-support" class="bv-no-focus-ring"><span class="bd-content-title">分体式按钮支持<a class="anchorjs-link" href="#split-button-support" aria-labelledby="split-button-support"></a></span></h2>
<p>创建一个拆分下拉按钮，其中左侧按钮提供标准的 <code translate="no" class="notranslate text-nowrap">click</code> 事件和链接支持，而右侧则是下拉菜单切换按钮。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-split notranslate">
<div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2470">
<button type="button" class="btn btn-secondary" id="__BVID__2470__BV_button_">Split Dropdown</button>
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary dropdown-toggle-split" id="__BVID__2470__BV_toggle_"><span class="sr-only">Toggle Dropdown</span></button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2470__BV_button_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here...</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">split</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Split Dropdown"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here...<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="split-button-link-support" class="bv-no-focus-ring"><span class="bd-content-title">分体式按钮链接支持<a class="anchorjs-link" href="#split-button-link-support" aria-labelledby="split-button-link-support"></a></span></h3>
<p>左拆分按钮默认为 <code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code>（确切地说是 <code translate="no" class="notranslate text-nowrap">&lt;b-button&gt;</code> ）。要将此按钮转换为 link 或 <code translate="no" class="notranslate text-nowrap">&lt;router-link&gt;</code>，请在保持按钮外观的同时，通过 <code translate="no" class="notranslate text-nowrap">split-href</code> 属性指定或通过 <code translate="no" class="notranslate text-nowrap">split-to</code> 属性 <code translate="no" class="notranslate text-nowrap">to</code> （指定）一个路由器值。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-split-link notranslate">
<div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2478"><a target="_self" href="#foo/bar" class="btn btn-secondary" id="__BVID__2478__BV_button_">Split Link</a>
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary dropdown-toggle-split" id="__BVID__2478__BV_toggle_"><span class="sr-only">Toggle Dropdown</span></button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2478__BV_button_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here...</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">split</span> <span class="hljs-attr">split-href</span>=<span class="hljs-string">"#foo/bar"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Split Link"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here...<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="split-button-type" class="bv-no-focus-ring"><span class="bd-content-title">拆分按钮类型<a class="anchorjs-link" href="#split-button-type" aria-labelledby="split-button-type"></a></span></h3>
<p>拆分按钮默认为 <code translate="no" class="notranslate text-nowrap">'button'</code> 按钮 <code translate="no" class="notranslate text-nowrap">type</code>（类型）。您可以通过 <code translate="no" class="notranslate text-nowrap">split-button-type</code> 道具指定其他类型。支持的值包括：<code translate="no" class="notranslate text-nowrap">'button'</code>，<code translate="no" class="notranslate text-nowrap">'submit'</code> 和 <code translate="no" class="notranslate text-nowrap">'reset'</code>。</p>
<p>如果设置了 <code translate="no" class="notranslate text-nowrap">split-to</code> 或 <code translate="no" class="notranslate text-nowrap">split-href</code> 属性，则将忽略 <code translate="no" class="notranslate text-nowrap">split-button-type</code> 属性。</p>
<h2 id="styling-options" class="bv-no-focus-ring"><span class="bd-content-title">样式选项<a class="anchorjs-link" href="#styling-options" aria-labelledby="styling-options"></a></span></h2>
<p>下拉菜单支持用于设置下拉触发按钮样式的各种道具。</p>
<h3 id="sizing" class="bv-no-focus-ring"><span class="bd-content-title">尺寸<a class="anchorjs-link" href="#sizing" aria-labelledby="sizing"></a></span></h3>
<p>下拉菜单可使用各种尺寸的触发按钮，包括默认和拆分下拉按钮。</p>
<p>将 <code translate="no" class="notranslate text-nowrap">size</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">sm</code> （较小按钮）或 <code translate="no" class="notranslate text-nowrap">lg</code> （较大按钮）。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-sizes notranslate">
<div>
<div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2487">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary btn-lg" id="__BVID__2487__BV_toggle_">Large</button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2487__BV_toggle_">
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Action</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Another action</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Something else here</button>
</li>
</ul>
</div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2491">
<button type="button" class="btn btn-secondary btn-lg" id="__BVID__2491__BV_button_">Large Split</button>
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary btn-lg dropdown-toggle-split" id="__BVID__2491__BV_toggle_"><span class="sr-only">Toggle Dropdown</span></button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2491__BV_button_">
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Action</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Another action</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Something else here...</button>
</li>
</ul>
</div>
</div>
<div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2495">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary btn-sm" id="__BVID__2495__BV_toggle_">Small</button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2495__BV_toggle_">
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Action</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Another action</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Something else here...</button>
</li>
</ul>
</div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2499">
<button type="button" class="btn btn-secondary btn-sm" id="__BVID__2499__BV_button_">Small Split</button>
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary btn-sm dropdown-toggle-split" id="__BVID__2499__BV_toggle_"><span class="sr-only">Toggle Dropdown</span></button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2499__BV_button_">
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Action</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Another action</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Something else here...</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Large"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">split</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Large Split"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Something else here...<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Small"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Something else here...<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">split</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Small Split"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Something else here...<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>注意：</strong> <em>更改按钮的大小不会影响菜单项的大小！</em></p>
<h3 id="dropdown-color-variants" class="bv-no-focus-ring"><span class="bd-content-title">下拉颜色变量<a class="anchorjs-link" href="#dropdown-color-variants" aria-labelledby="dropdown-color-variants"></a></span></h3>
<p>下拉切换按钮可以通过将 <code translate="no" class="notranslate text-nowrap">variant</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">success</code>，<code translate="no" class="notranslate text-nowrap">primary</code>，<code translate="no" class="notranslate text-nowrap">info</code>，<code translate="no" class="notranslate text-nowrap">danger</code>，<code translate="no" class="notranslate text-nowrap">link</code>，<code translate="no" class="notranslate text-nowrap">outline-dark</code>，等等。（或自定义变量，如果已定义）来应用标准的 Bootstrap 上下文变量之一。 默认变量是 <code translate="no" class="notranslate text-nowrap">secondary</code> 变量。</p>
<p>有关内置上下文变量的完整列表，请参见 <a href="../../../bootstrap-vue/docs/reference/color-variants" class="font-weight-bold">Variant Reference</a> 。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-variants notranslate">
<div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2504">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary" id="__BVID__2504__BV_toggle_">Primary</button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2504__BV_toggle_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2511">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-success" id="__BVID__2511__BV_toggle_">Success</button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2511__BV_toggle_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2518">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-outline-danger" id="__BVID__2518__BV_toggle_">Outline Danger</button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2518__BV_toggle_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Primary"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Success"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Outline Danger"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-danger"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>您还可以通过 <code translate="no" class="notranslate text-nowrap">toggle-class</code> 属性将任意类应用于切换按钮。该属性接受一个字符串或字符串数组。</p>
<h3 id="split-button-color-variant" class="bv-no-focus-ring"><span class="bd-content-title">拆分按钮颜色变量<a class="anchorjs-link" href="#split-button-color-variant" aria-labelledby="split-button-color-variant"></a></span></h3>
<p>默认情况下，left split button（左拆分按钮）使用与 <code translate="no" class="notranslate text-nowrap">toggle</code> button（切换按钮）相同的 <code translate="no" class="notranslate text-nowrap">variant</code>（变体）。 您可以通过 <code translate="no" class="notranslate text-nowrap">split-variant</code> 属性为 split button（拆分按钮）提供自己的变量。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-split-variant notranslate">
<div>
<div class="dropdown b-dropdown m-2 btn-group" id="__BVID__2526">
<button type="button" class="btn btn-outline-primary" id="__BVID__2526__BV_button_">Split Variant Dropdown</button>
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary dropdown-toggle-split" id="__BVID__2526__BV_toggle_"><span class="sr-only">Toggle Dropdown</span></button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2526__BV_button_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here...</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span>
    <span class="hljs-attr">split</span>
    <span class="hljs-attr">split-variant</span>=<span class="hljs-string">"outline-primary"</span>
    <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>
    <span class="hljs-attr">text</span>=<span class="hljs-string">"Split Variant Dropdown"</span>
    <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here...<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="block-level-dropdowns" class="bv-no-focus-ring"><span class="bd-content-title">块级下拉菜单<a class="anchorjs-link" href="#block-level-dropdowns" aria-labelledby="block-level-dropdowns"></a></span></h3>
<p>默认情况下，下拉菜单的作用类似于按钮，并以嵌入式方式显示。 要创建块级下拉菜单（跨到父级的整个宽度），请设置 <code translate="no" class="notranslate text-nowrap">block</code> 属性。 同时支持常规和拆分按钮下拉菜单。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-block notranslate">
<div>
<div class="dropdown b-dropdown m-2" id="__BVID__2534">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary btn-block" id="__BVID__2534__BV_toggle_">Block Level Dropdown</button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2534__BV_toggle_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
<div class="dropdown b-dropdown m-2 btn-group d-flex" id="__BVID__2541">
<button type="button" class="btn btn-outline-primary btn-block" id="__BVID__2541__BV_button_">Block Level Split Dropdown</button>
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary dropdown-toggle-split" id="__BVID__2541__BV_toggle_"><span class="sr-only">Toggle Dropdown</span></button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2541__BV_button_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here...</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Block Level Dropdown"</span> <span class="hljs-attr">block</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span>
    <span class="hljs-attr">text</span>=<span class="hljs-string">"Block Level Split Dropdown"</span>
    <span class="hljs-attr">block</span>
    <span class="hljs-attr">split</span>
    <span class="hljs-attr">split-variant</span>=<span class="hljs-string">"outline-primary"</span>
    <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>
    <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here...<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>如果您也希望下拉菜单也跨过父容器的整个宽度，请将 <code translate="no" class="notranslate text-nowrap">w-100</code> 实用程序类添加到 <code translate="no" class="notranslate text-nowrap">menu-class</code> 属性中。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-block-menu notranslate">
<div>
<div class="dropdown b-dropdown m-2" id="__BVID__2549">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary btn-block" id="__BVID__2549__BV_toggle_">Block Level Dropdown Menu</button>
<ul role="menu" tabindex="-1" class="dropdown-menu w-100" aria-labelledby="__BVID__2549__BV_toggle_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span>
    <span class="hljs-attr">text</span>=<span class="hljs-string">"Block Level Dropdown Menu"</span>
    <span class="hljs-attr">block</span>
    <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>
    <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>
    <span class="hljs-attr">menu-class</span>=<span class="hljs-string">"w-100"</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="dropdown-sub-component-color-variants" class="bv-no-focus-ring"><span class="bd-content-title">下拉子组件颜色变量<a class="anchorjs-link" href="#dropdown-sub-component-color-variants" aria-labelledby="dropdown-sub-component-color-variants"></a></span></h3>
<p>许多受支持的下拉 <a href="#dropdown-supported-sub-components" class="font-weight-bold">sub-components</a>（子组件）都提供了用于控制其文本颜色的 <code translate="no" class="notranslate text-nowrap">variant</code> 属性。</p>
<h3 id="hidden-caret" class="bv-no-focus-ring"><span class="bd-content-title">隐藏的插入符<a class="anchorjs-link" href="#hidden-caret" aria-labelledby="hidden-caret"></a></span></h3>
<p>通过将 <code translate="no" class="notranslate text-nowrap">no-caret</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code>。可以在视觉上隐藏切换器的插入符号的情况下创建下拉列表。当下拉菜单显示为图标时，这很有用。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-hidden-caret notranslate">
<div>
<div class="dropdown b-dropdown btn-group" id="__BVID__2557">
<button aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-link btn-lg text-decoration-none dropdown-toggle-no-caret" id="__BVID__2557__BV_toggle_"> 🔍<span class="sr-only">Search</span></button>
<ul role="menu" tabindex="-1" class="dropdown-menu" aria-labelledby="__BVID__2557__BV_toggle_">
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Another action</a></li>
<li role="presentation"><a role="menuitem" target="_self" href="#" class="dropdown-item">Something else here...</a></li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>  <span class="hljs-attr">variant</span>=<span class="hljs-string">"link"</span> <span class="hljs-attr">toggle-class</span>=<span class="hljs-string">"text-decoration-none"</span> <span class="hljs-attr">no-caret</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:button-content</span>&gt;</span>
      <span class="hljs-symbol">&amp;#x1f50d;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sr-only"</span>&gt;</span>Search<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Another action<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Something else here...<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>注意：</strong> 使用 <code translate="no" class="notranslate text-nowrap">split</code> mode（分割模式）时。插入符号将始终显示。</p>
<h2 id="lazy-dropdown" class="bv-no-focus-ring"><span class="bd-content-title">慢速下拉菜单<a class="anchorjs-link" href="#lazy-dropdown" aria-labelledby="lazy-dropdown"></a></span></h2>
<p>默认情况下，即使未显示菜单，<code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code> 也会在 DOM 中呈现菜单内容。当在同一页面上呈现大量下拉菜单时，由于总体内存利用率较高，因此性能可能会受到影响。通过将 <code translate="no" class="notranslate text-nowrap">lazy</code> 属性设置为 true ，可以指示 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code> 仅在显示菜单内容时渲染菜单内容。</p>
<h2 id="dropdown-supported-sub-components" class="bv-no-focus-ring"><span class="bd-content-title">下拉菜单支持的子组件<a class="anchorjs-link" href="#dropdown-supported-sub-components" aria-labelledby="dropdown-supported-sub-components"></a></span></h2>
<p>以下组件可以放置在下拉列表中。使用任何其他组件或标记可能会中断布局和/或键盘导航。</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>子组件</th>
<th>描述</th>
<th>别名</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item&gt;</code></td>
<td>提供 click，link，and <code translate="no" class="notranslate text-nowrap">&lt;router-link&gt;</code>/<code translate="no" class="notranslate text-nowrap">&lt;nuxt-link&gt;</code>  默认情况下渲染为 <code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code> 元素。</td>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dd-item&gt;</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-button&gt;</code></td>
<td>使用 <code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code> 元素渲染菜单项的 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item&gt;</code> 的替代方法。</td>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-btn&gt;</code>, <code translate="no" class="notranslate text-nowrap">&lt;b-dd-item-button&gt;</code>, <code translate="no" class="notranslate text-nowrap">&lt;b-dd-item-btn&gt;</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-divider&gt;</code></td>
<td>可用于分离下拉项的分隔线/间隔线。</td>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dd-divider&gt;</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-text&gt;</code></td>
<td>菜单中自由流动的文本内容。</td>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dd-text&gt;</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-form&gt;</code></td>
<td>用于在下拉菜单中放置表单控件。</td>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dd-form&gt;</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-group&gt;</code></td>
<td>用于将下拉式子组件与可选标头分组。</td>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dd-group&gt;</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-header&gt;</code></td>
<td>标题项，用于帮助标识一组下拉项。</td>
<td><code translate="no" class="notranslate text-nowrap">&lt;b-dd-header&gt;</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>注意：</strong> <em> <strong>不</strong> 支持嵌套子菜单。</em></p>
<h3 id="b-dropdown-item" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item&gt;</code><a class="anchorjs-link" href="#b-dropdown-item" aria-labelledby="b-dropdown-item"></a></span></h3>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item&gt;</code> 通常用于在菜单内创建导航链接。 使用 <code translate="no" class="notranslate text-nowrap">href</code> 属性或 <code translate="no" class="notranslate text-nowrap">to</code> 属性（用于路由器链接支持）来生成适当的导航链接。 如果既不提供 <code translate="no" class="notranslate text-nowrap">href</code> 也不提供 <code translate="no" class="notranslate text-nowrap">to</code> ，则将使用 <code translate="no" class="notranslate text-nowrap">href</code> 为 <code translate="no" class="notranslate text-nowrap">#</code> 的标准<code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code> 链接生成（带有事件处理程序，该事件处理程序将通过阻止默认链接操作来防止滚动到顶部行为）。</p>
<p>通过设置 <code translate="no" class="notranslate text-nowrap">disabled</code> 属性来禁用下拉菜单项。</p>
<h3 id="b-dropdown-item-button" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-button&gt;</code><a class="anchorjs-link" href="#b-dropdown-item-button" aria-labelledby="b-dropdown-item-button"></a></span></h3>
<p>历史上下拉菜单的内容必须是链接（<code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item&gt;</code>），但是Bootstrap v4不再是这种情况。 现在，您可以选择使用<code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-button&gt;</code> 子组件在下拉菜单中创建 <code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code> 元素。<code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-button&gt;</code>不支持 <code translate="no" class="notranslate text-nowrap">href</code> 或 <code translate="no" class="notranslate text-nowrap">to</code> 属性。</p>
<p>通过设置 <code translate="no" class="notranslate text-nowrap">disabled</code> 属性来禁用下拉项按钮。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-item-buttons notranslate">
<div>
<div id="dropdown-buttons" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-buttons__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary">Dropdown using buttons as menu items</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-buttons__BV_toggle_" class="dropdown-menu">
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">I'm a button</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item active">I'm a active button</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" disabled="disabled" class="dropdown-item">I'm a button, but disabled!</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">I don't look like a button, but I am!</button>
</li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-buttons"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown using buttons as menu items"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>I'm a button<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span> <span class="hljs-attr">active</span>&gt;</span>I'm a active button<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span> <span class="hljs-attr">disabled</span>&gt;</span>I'm a button, but disabled!<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>I don't look like a button, but I am!<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>当菜单项不触发导航时，建议使用 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-button&gt;</code> 子组件。</p>
<h3 id="b-dropdown-item-divider" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-divider&gt;</code><a class="anchorjs-link" href="#b-dropdown-item-divider" aria-labelledby="b-dropdown-item-divider"></a></span></h3>
<p>用 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-divider&gt;</code> 分开相关菜单项组。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-item-divider notranslate">
<div>
<div id="dropdown-divider" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-divider__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary">Dropdown with divider</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-divider__BV_toggle_" class="dropdown-menu">
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">First item</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Second item</button>
</li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Separated Item</button>
</li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-divider"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown with divider"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>First item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Second item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Separated Item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="b-dropdown-text" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-text&gt;</code><a class="anchorjs-link" href="#b-dropdown-text" aria-labelledby="b-dropdown-text"></a></span></h3>
<p>使用 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-text&gt;</code> 子组件将任意格式的文本放在下拉菜单中，或者使用文本并使用间距实用程序。 请注意，您可能需要其他大小调整样式来约束/设置菜单宽度。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-text notranslate">
<div>
<div id="dropdown-text" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-text__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary">Dropdown with text</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-text__BV_toggle_" class="dropdown-menu">
<li role="presentation" style="width: 240px;">
<p class="b-dropdown-text"> Some example text that's free-flowing within the dropdown menu. </p>

</li>
<li role="presentation">
<p class="b-dropdown-text">And this is more example text.</p>
</li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">First item</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Second Item</button>
</li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-text"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown with text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 240px;"</span>&gt;</span>
      Some example text that's free-flowing within the dropdown menu.
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-text</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-text</span>&gt;</span>And this is more example text.<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-text</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>First item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Second Item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-text&gt;</code> 已应用了BootstrapVue定制类 <code translate="no" class="notranslate text-nowrap">.b-dropdown-text</code> ，该类设置了一些适用于大多数情况的基本样式。 默认情况下，其宽度将与最宽的 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item&gt;</code> 内容相同。 您可能需要在组件上放置其他样式或帮助程序类。</p>
<p>默认情况下， <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-text&gt;</code> 使用标记 <code translate="no" class="notranslate text-nowrap">&lt;p&gt;</code> 进行渲染。您可以通过将 <code translate="no" class="notranslate text-nowrap">tag</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-text&gt;</code> 子组件上的任何有效 HTML5 标签来更改渲染的标签。</p>
<h3 id="b-dropdown-form" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-form&gt;</code><a class="anchorjs-link" href="#b-dropdown-form" aria-labelledby="b-dropdown-form"></a></span></h3>
<p>下拉菜单支持基本形式。 将 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-form&gt;</code> 放在下拉菜单中，然后将表单控件放在 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-form&gt;</code> 中。<code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-form&gt;</code> 基于 <a href="../../../bootstrap-vue/docs/components/form" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form&gt;</code></a> 组件，并支持与常规形式相同的道具和属性。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-form notranslate">
<div>
<div id="dropdown-form" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-form__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary">Dropdown with form</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-form__BV_toggle_" class="dropdown-menu">
<li role="presentation">
<form tabindex="-1" class="b-dropdown-form">
<div role="group" class="form-group" id="__BVID__2581">
<label for="dropdown-form-email" class="d-block" id="__BVID__2581__BV_label_">Email</label>
<div class="bv-no-focus-ring">
<input id="dropdown-form-email" type="text" placeholder="email@example.com" class="form-control form-control-sm">
</div>
</div>
<div role="group" class="form-group" id="__BVID__2583">
<label for="dropdown-form-password" class="d-block" id="__BVID__2583__BV_label_">Password</label>
<div class="bv-no-focus-ring">
<input id="dropdown-form-password" type="password" placeholder="Password" class="form-control form-control-sm">
</div>
</div>
<div class="mb-3 custom-control custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__2585">
<label class="custom-control-label" for="__BVID__2585">Remember me</label>
</div>
<button type="button" class="btn btn-primary btn-sm">Sign In</button>
</form>
</li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">New around here? Sign up</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Forgot Password?</button>
</li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-form"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown with form"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"dropdown"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-form</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">label-for</span>=<span class="hljs-string">"dropdown-form-email"</span> @<span class="hljs-attr">submit.stop.prevent</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-form-email"</span>
            <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
            <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"email@example.com"</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Password"</span> <span class="hljs-attr">label-for</span>=<span class="hljs-string">"dropdown-form-password"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-form-password"</span>
            <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span>
            <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
            <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Password"</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span>Remember me<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onClick"</span>&gt;</span>Sign In<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-form</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>New around here? Sign up<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Forgot Password?<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">methods</span>: {
      onClick() {
        <span class="hljs-comment">// Close the menu and (by passing true) return focus to the toggle button</span>
        <span class="hljs-keyword">this</span>.$refs.dropdown.hide(<span class="hljs-literal">true</span>)
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-form&gt;</code> 已应用 BootstrapVue 定制类 <code translate="no" class="notranslate text-nowrap">.b-dropdown-form</code> ，它设置了一些适用于大多数情况的基本样式。默认情况下，其宽度将与最宽的 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item&gt;</code> 内容相同。您可能需要在组件上放置其他样式或帮助程序类。</p>
<h3 id="b-dropdown-item-group" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-group&gt;</code><a class="anchorjs-link" href="#b-dropdown-item-group" aria-labelledby="b-dropdown-item-group"></a></span></h3>
<p>将一组下拉子组件与一个可选的关联标头分组。 在您的 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-group&gt;</code>  与 other groups（其他组）或 non-grouped（未分组）的下拉内容之间放置一个 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-divider&gt;</code></p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-item-group notranslate">
<div>
<div id="dropdown-grouped" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-grouped__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary">Dropdown with group</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-grouped__BV_toggle_" class="dropdown-menu">
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Non-grouped Item </button>
</li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation">
<header id="_bv_dropdown-group-1_group_dd_header" role="heading" class="dropdown-header">Group 1</header>
<ul id="dropdown-group-1" role="group" aria-describedby="_bv_dropdown-group-1_group_dd_header" class="list-unstyled">
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">First Grouped item</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Second Grouped Item</button>
</li>
</ul>
</li>
<li role="presentation">
<header id="_bv_dropdown-group-2_group_dd_header" role="heading" class="dropdown-header">Group 2</header>
<ul id="dropdown-group-2" role="group" aria-describedby="_bv_dropdown-group-2_group_dd_header" class="list-unstyled">
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">First Grouped item</button>
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item">Second Grouped Item</button>
</li>
</ul>
</li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Another Non-grouped Item </button>
</li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-grouped"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown with group"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      Non-grouped Item
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-group</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-group-1"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Group 1"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>First Grouped item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Second Grouped Item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-group</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-group-2"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Group 2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>First Grouped item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>Second Grouped Item<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      Another Non-grouped Item
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>建议使用 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-group&gt;</code> 代替 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-header&gt;</code> 为标题提供可访问的分组项目。</p>
<h3 id="b-dropdown-item-header" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-header&gt;</code><a class="anchorjs-link" href="#b-dropdown-item-header" aria-labelledby="b-dropdown-item-header"></a></span></h3>
<p>在任何下拉菜单中添加标题以标记操作部分。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-item-header notranslate">
<div>
<div id="dropdown-header" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-header__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-secondary">Dropdown with header</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-header__BV_toggle_" class="dropdown-menu">
<li role="presentation">
<header id="dropdown-header-label" role="heading" class="dropdown-header"> Dropdown header </header>
</li>
<li role="presentation">
<button aria-describedby="dropdown-header-label" role="menuitem" type="button" class="dropdown-item"> First item </button>
</li>
<li role="presentation">
<button aria-describedby="dropdown-header-label" role="menuitem" type="button" class="dropdown-item"> Second Item </button>
</li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-header"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown with header"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-header</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-header-label"</span>&gt;</span>
      Dropdown header
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-header</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"dropdown-header-label"</span>&gt;</span>
      First item
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"dropdown-header-label"</span>&gt;</span>
      Second Item
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>有关使辅助技术用户更容易访问标题的详细信息，请参见 <a href="#dropdown-headers-and-accessibility" class="font-weight-bold">Dropdown headers and accessibility</a> （下拉标题和可访问性）部分。</p>
<p>使用 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-group&gt;</code> 子组件可简化创建具有关联标头的可访问的分组下拉项的过程。</p>
<h4 id="closing-the-menu-via-form-interaction" class="bv-no-focus-ring"><span class="bd-content-title">通过表单交互关闭菜单<a class="anchorjs-link" href="#closing-the-menu-via-form-interaction" aria-labelledby="closing-the-menu-via-form-interaction"></a></span></h4>
<p>点击 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-form&gt;</code> 内的按钮将不会自动关闭菜单。 如果需要使用按钮（或通过表单提交事件）关闭菜单，请在  <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown&gt;</code> 实例上调用 <code translate="no" class="notranslate text-nowrap">hide()</code> 方法，如上例所示。</p>
<p><code translate="no" class="notranslate text-nowrap">hide()</code> 方法接受单个布尔参数。如果参数为 <code translate="no" class="notranslate text-nowrap">true</code> ，则菜单关闭后，焦点将返回到下拉切换按钮。 否则，一旦关闭菜单，文档将获得焦点。</p>
<h2 id="listening-to-dropdown-changes-via-root-events" class="bv-no-focus-ring"><span class="bd-content-title">通过 $root 事件监听下拉更改<a class="anchorjs-link" href="#listening-to-dropdown-changes-via-root-events" aria-labelledby="listening-to-dropdown-changes-via-root-events"></a></span></h2>
<p>要监听任何下拉窗口，请使用：</p>
<figure class="highlight">
<pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  mounted() {
    <span class="hljs-keyword">this</span>.$root.$on(<span class="hljs-string">'bv::dropdown::show'</span>, bvEvent =&gt; {
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Dropdown is about to be shown'</span>, bvEvent)
    })
  }
}</pre></figure>
<p>有关事件的完整列表，请参阅文档的 <a href="#component-reference" class="font-weight-bold">Events</a>（事件）部分。</p>
<h2 id="optionally-scoped-default-slot" class="bv-no-focus-ring"><span class="bd-content-title">可选范围的默认插槽<a class="anchorjs-link" href="#optionally-scoped-default-slot" aria-labelledby="optionally-scoped-default-slot"></a></span></h2>
<p>默认插槽的范围可以选择为以下范围：</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性或方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">hide()</code></td>
<td>可用于关闭下拉菜单。接受可选的布尔参数，如果为 <code translate="no" class="notranslate text-nowrap">true</code> ，则将焦点返回到切换按钮</td>
</tr>
</tbody>
</table>
</div>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">可访问性<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>提供一个唯一的 <code translate="no" class="notranslate text-nowrap">id</code> 属性可通过在渲染的标记中自动添加适当的 <code translate="no" class="notranslate text-nowrap">aria-*</code> 属性来确保ARIA的合规性。</p>
<p>默认的 ARIA 角色设置为 <code translate="no" class="notranslate text-nowrap">menu</code> ，但是您可以根据您的用户情况，通过 <code translate="no" class="notranslate text-nowrap">role</code> 属性将此默认角色更改为另一个角色（例如 <code translate="no" class="notranslate text-nowrap">navigation</code>【导航】）。</p>
<p>当菜单项不触发导航时，建议使用 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item-button&gt;</code> 子组件（不作为链接公布）而不是 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item&gt;</code>（已提供）作为指向用户的链接）。</p>
<h3 id="headers-and-accessibility" class="bv-no-focus-ring"><span class="bd-content-title">标题和可访问性<a class="anchorjs-link" href="#headers-and-accessibility" aria-labelledby="headers-and-accessibility"></a></span></h3>
<p>在下拉菜单中使用 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-header&gt;</code> 组件时，建议为每个标题添加一个 <code translate="no" class="notranslate text-nowrap">id</code> 属性，然后在每个标题上设置 <code translate="no" class="notranslate text-nowrap">aria-describedby</code> 性（设置为相关标题的 <code translate="no" class="notranslate text-nowrap">id</code> 值） 在该标题下的下拉菜单项之后。 这将为辅助技术的用户（即视障用户）提供有关下拉项的其他上下文：</p>
<div translate="translate" class="bd-example vue-example vue-example-b-dropdown-aria notranslate">
<div>
<div id="dropdown-aria" class="dropdown b-dropdown m-2 btn-group">
<button id="dropdown-aria__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn dropdown-toggle btn-primary">Dropdown ARIA</button>
<ul role="menu" tabindex="-1" aria-labelledby="dropdown-aria__BV_toggle_" class="dropdown-menu">
<li role="presentation">
<header id="dropdown-header-1" role="heading" class="dropdown-header">Groups</header>
</li>
<li role="presentation">
<button aria-describedby="dropdown-header-1" role="menuitem" type="button" class="dropdown-item">Add</button>
</li>
<li role="presentation">
<button aria-describedby="dropdown-header-1" role="menuitem" type="button" class="dropdown-item">Delete</button>
</li>
<li role="presentation">
<header id="dropdown-header-2" role="heading" class="dropdown-header">Users</header>
</li>
<li role="presentation">
<button aria-describedby="dropdown-header-2" role="menuitem" type="button" class="dropdown-item">Add</button>
</li>
<li role="presentation">
<button aria-describedby="dropdown-header-2" role="menuitem" type="button" class="dropdown-item">Delete</button>
</li>
<li role="presentation">
<hr role="separator" aria-orientation="horizontal" class="dropdown-divider">
</li>
<li role="presentation">
<button role="menuitem" type="button" class="dropdown-item"> Something <strong>not</strong> associated with Users </button>
</li>
</ul>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-aria"</span> <span class="hljs-attr">text</span>=<span class="hljs-string">"Dropdown ARIA"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-header</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-header-1"</span>&gt;</span>Groups<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-header</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"dropdown-header-1"</span>&gt;</span>Add<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"dropdown-header-1"</span>&gt;</span>Delete<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-header</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dropdown-header-2"</span>&gt;</span>Users<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-header</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"dropdown-header-2"</span>&gt;</span>Add<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"dropdown-header-2"</span>&gt;</span>Delete<span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-divider</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-divider</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>
      Something <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>not<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span> associated with Users
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown-item-button</span>&gt;</span>

  <span class="hljs-tag">&lt;/<span class="hljs-name">b-dropdown</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>作为简化的替代方法，可以使用 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-group&gt;</code> 轻松地将标题文本与所包含的下拉子组件相关联。</p>
<h3 id="keyboard-navigation" class="bv-no-focus-ring"><span class="bd-content-title">键盘导航<a class="anchorjs-link" href="#keyboard-navigation" aria-labelledby="keyboard-navigation"></a></span></h3>
<p>下拉菜单支持键盘导航，可模拟本地 <code translate="no" class="notranslate text-nowrap">&lt;select&gt;</code> 行为。</p>
<p>注意，<kbd class="notranslate" translate="no">DOWN</kbd> 和 <kbd class="notranslate" translate="no">UP</kbd> 不会将焦点移到 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-form&gt;</code> 子组件中，但是用户仍然可以使用 <kbd class="notranslate" translate="no">TAB</kbd> 或 <kbd class="notranslate" translate="no">SHIFT</kbd>+<kbd class="notranslate" translate="no">TAB</kbd> 移入菜单内的表单控件。</p>
<h2 id="implementation-notes" class="bv-no-focus-ring"><span class="bd-content-title">实施说明<a class="anchorjs-link" href="#implementation-notes" aria-labelledby="implementation-notes"></a></span></h2>
<p>出于可访问性的原因，下拉菜单使用语义 <code translate="no" class="notranslate text-nowrap">&lt;ul&gt;</code> 和 <code translate="no" class="notranslate text-nowrap">&lt;li&gt;</code> 元素渲染。<code translate="no" class="notranslate text-nowrap">.dropdown-menu</code> 菜单是 <code translate="no" class="notranslate text-nowrap">&lt;ul&gt;</code> 元素，而下拉菜单项（items【项目】, buttons【按钮】, text【文本】, form【表单】, headers【标题】, 和 dividers【分隔符】）则包装在 <code translate="no" class="notranslate text-nowrap">&lt;li&gt;</code> 素中。如果创建自定义项目以放置在下拉菜单中，请确保将它们包装为普通的 <code translate="no" class="notranslate text-nowrap">&lt;li&gt;</code> 。</p>
<h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">另请参阅<a class="anchorjs-link" href="#see-also" aria-labelledby="see-also"></a></span></h2>
<ul>
<li><a href="../../../bootstrap-vue/docs/components/nav#dropdown-support" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-nav-item-dropdown&gt;</code></a> 用于 <code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code> 和 <code translate="no" class="notranslate text-nowrap">&lt;n-navbar&gt;</code> 内部的下拉菜单支持</li>
<li><a href="../../../bootstrap-vue/docs/reference/router-links" class="font-weight-bold">Router Link Support</a> 参考，有关 <code translate="no" class="notranslate text-nowrap">&lt;b-dropdown-item&gt;</code> 上特定于 router-link（路由链接）属性的信息</li>
</ul>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件参考<a href="../../../bootstrap-vue/docs/components/dropdown#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-dropdown" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-dropdown&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/dropdown/dropdown.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dd&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有BootstrapVue或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-props" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2122">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__2122__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__2122__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为 “true” 时，禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="dropup" class="" id="__BVID__2122__row_dropup">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dropup</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将菜单置于按钮顶部</td>
</tr>
<tr role="row" data-pk="dropright" class="" id="__BVID__2122__row_dropright">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dropright</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将菜单置于按钮右侧</td>
</tr>
<tr role="row" data-pk="dropleft" class="" id="__BVID__2122__row_dropleft">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dropleft</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将菜单置于按钮左侧</td>
</tr>
<tr role="row" data-pk="right" class="" id="__BVID__2122__row_right">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">right</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将菜单的右边与按钮的右边对齐</td>
</tr>
<tr role="row" data-pk="offset" class="" id="__BVID__2122__row_offset">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">0</code></td>
<td aria-colindex="4" role="cell" class="">指定要移动菜单的像素数。 支持负值</td>
</tr>
<tr role="row" data-pk="no-flip" class="" id="__BVID__2122__row_no-flip">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-flip</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">防止菜单自动翻转位置</td>
</tr>
<tr role="row" data-pk="popper-opts" class="" id="__BVID__2122__row_popper-opts">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">popper-opts</code></td>
<td aria-colindex="2" role="cell" class="">Any</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">传递给 Popper.js 的其他配置</td>
</tr>
<tr role="row" data-pk="boundary" class="" id="__BVID__2122__row_boundary">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">boundary</code></td>
<td aria-colindex="2" role="cell" class="">String or HTMLElement</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'scrollParent'</code></td>
<td aria-colindex="4" role="cell" class="">菜单的边界约束：'scrollParent'，'window'，'viewport'或对 HTMLElement 的引用</td>
</tr>
<tr role="row" data-pk="text" class="" id="__BVID__2122__row_text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在切换按钮或拆分按钮中的文本为拆分模式</td>
</tr>
<tr role="row" data-pk="html" class="" id="__BVID__2122__row_html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">html</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将 HTML字 符串放置在切换按钮或拆分按钮中的是拆分模式。谨慎使用</td>
</tr>
<tr role="row" data-pk="size" class="" id="__BVID__2122__row_size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">size</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置组件外观的大小。 'sm'，'md'（默认）或'lg'</td>
</tr>
<tr role="row" data-pk="variant" class="" id="__BVID__2122__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'secondary'</code></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于组件</td>
</tr>
<tr role="row" data-pk="block" class="" id="__BVID__2122__row_block">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">block</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">渲染一个100％宽度的切换按钮（扩展到其父容器的宽度）</td>
</tr>
<tr role="row" data-pk="menu-class" class="" id="__BVID__2122__row_menu-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">menu-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）添加到菜单容器</td>
</tr>
<tr role="row" data-pk="toggle-tag" class="" id="__BVID__2122__row_toggle-tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">toggle-tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'button'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的 HTML 标签，而不是默认标签。 谨慎使用</td>
</tr>
<tr role="row" data-pk="toggle-text" class="" id="__BVID__2122__row_toggle-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">toggle-text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Toggle Dropdown'</code></td>
<td aria-colindex="4" role="cell" class="">在拆分模式下，要在切换上设置的 ARIA 标签（sr-only）</td>
</tr>
<tr role="row" data-pk="toggle-class" class="" id="__BVID__2122__row_toggle-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">toggle-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）添加到切换按钮</td>
</tr>
<tr role="row" data-pk="no-caret" class="" id="__BVID__2122__row_no-caret">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-caret</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">隐藏切换按钮上的插入符号</td>
</tr>
<tr role="row" data-pk="split" class="" id="__BVID__2122__row_split">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">split</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，渲染拆分按钮下拉列表</td>
</tr>
<tr role="row" data-pk="split-href" class="" id="__BVID__2122__row_split-href">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">split-href</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表示拆分按钮的链接的目标 URL</td>
</tr>
<tr role="row" data-pk="split-to" class="" id="__BVID__2122__row_split-to">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">split-to</code></td>
<td aria-colindex="2" role="cell" class="">String or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">router-link 属性：表示拆分按钮的目标路由。单击时，to 属性的值将在内部传递到 router.push（），因此该值可以是字符串或位置描述符对象</td>
</tr>
<tr role="row" data-pk="split-variant" class="" id="__BVID__2122__row_split-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">split-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>

<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于拆分按钮。 默认为 'variant' 属性值</td>
</tr>
<tr role="row" data-pk="split-class" class="" id="__BVID__2122__row_split-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">split-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.2.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）添加到拆分按钮</td>
</tr>
<tr role="row" data-pk="split-button-type" class="" id="__BVID__2122__row_split-button-type">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">split-button-type</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'button'</code></td>
<td aria-colindex="4" role="cell" class="">在拆分按钮的 “类型” 属性中放置的值：'button'【按钮】, 'submit'【提交】, 'reset'【重置】</td>
</tr>
<tr role="row" data-pk="lazy" class="" id="__BVID__2122__row_lazy">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">lazy</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，仅在打开菜单时将菜单内容安装到 DOM 中</td>
</tr>
<tr role="row" data-pk="role" class="" id="__BVID__2122__row_role">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">role</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'menu'</code></td>
<td aria-colindex="4" role="cell" class="">将 ARIA 属性“role”【角色】设置为特定值</td>
</tr>
</tbody>
</table>
</div>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown&gt;</code> 支持生成 <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;router-link&gt;</code> 或 <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;nuxt-link&gt;</code> 组件（如果使用Nuxt.js）。有关路由器链接（或nuxt链接）特定道具的更多详细信息，请参阅 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/reference/router-links" class="alert-link" target="_self">Router support</a>（路由支持）参考部分。</p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title">插槽<a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2162">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">范围</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="button-content" class="" id="__BVID__2162__row_button-content">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">button-content</code></td>
<td aria-colindex="2" role="cell" class="">可用于实现带有图标和更多样式的自定义文本。</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="default" class="" id="__BVID__2162__row_default">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">default</code></td>
<td aria-colindex="2" role="cell" class="">下拉菜单内容的可选范围可选的默认插槽</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-events" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2173">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="show" class="" id="__BVID__2173__row_show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">show</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent对象。调用 bvEvt.preventDefault（）取消显示。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在显示下拉菜单之前发出。可取消</td>
</tr>
<tr role="row" data-pk="shown" class="" id="__BVID__2173__row_shown">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">shown</code></td>
<td aria-colindex="2" role="cell" class=""></td>
<td aria-colindex="3" role="cell" class="">显示下拉列表时发出。</td>
</tr>
<tr role="row" data-pk="hide" class="" id="__BVID__2173__row_hide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hide</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent对象。调用 bvEvt.preventDefault（）取消隐藏。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在隐藏下拉列表之前发出。可取消。</td>
</tr>
<tr role="row" data-pk="hidden" class="" id="__BVID__2173__row_hidden">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hidden</code></td>
<td aria-colindex="2" role="cell" class=""></td>
<td aria-colindex="3" role="cell" class="">隐藏下拉列表时发出。</td>
</tr>
<tr role="row" data-pk="toggle" class="" id="__BVID__2173__row_toggle">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">toggle</code></td>
<td aria-colindex="2" role="cell" class=""></td>
<td aria-colindex="3" role="cell" class="">单击切换按钮时发出。</td>
</tr>
<tr role="row" data-pk="click" class="" id="__BVID__2173__row_click">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">click</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">Native click event object（本机单击事件对象）</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在拆分模式下单击拆分按钮时发出。</td>
</tr>
<tr role="row" data-pk="bv::dropdown::show" class="" id="__BVID__2173__row_bv::dropdown::show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::dropdown::show</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent对象。调用 bvEvt.preventDefault（）取消显示。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在显示下拉列表之前在 $root 上发出。可取消。</td>
</tr>
<tr role="row" data-pk="bv::dropdown::hide" class="" id="__BVID__2173__row_bv::dropdown::hide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">bv::dropdown::hide</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent对象。调用 bvEvt.preventDefault（）取消隐藏。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在隐藏下拉列表之前在 $root 上发出。可取消。</td>
</tr>
</tbody>
</table>
</div>
</article>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-dropdown-item" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-dropdown-item&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-item" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-item" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/dropdown/dropdown-item.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-item-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-item-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-item-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-item-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-item-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-item-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dd-item&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small">注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-item-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-item-props" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-item-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2196">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="href" class="" id="__BVID__2196__row_href">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">href</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表示标准 a 链接的链接目标 URL</td>
</tr>
<tr role="row" data-pk="rel" class="" id="__BVID__2196__row_rel">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">rel</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在渲染的链接上设置'rel'属性</td>
</tr>
<tr role="row" data-pk="target" class="" id="__BVID__2196__row_target">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">target</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'_self'</code></td>
<td aria-colindex="4" role="cell" class="">在渲染的链接上设置 'target' 属性</td>
</tr>
<tr role="row" data-pk="active" class="" id="__BVID__2196__row_active">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“ true”时，使用有效样式将组件置于活动状态</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__2196__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“ true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="to" class="" id="__BVID__2196__row_to">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">to</code></td>
<td aria-colindex="2" role="cell" class="">String or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">router-link属性：表示链接的目标路由。单击时，to 属性的值将在内部传递到 router.push（），因此该值可以是字符串或位置描述符对象</td>
</tr>
<tr role="row" data-pk="append" class="" id="__BVID__2196__row_append">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">append</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">router-link属性：设置附加属性总是将相对路径附加到当前路径</td>
</tr>
<tr role="row" data-pk="replace" class="" id="__BVID__2196__row_replace">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">replace</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">router-link属性：设置替换属性将在单击时调用“ router.replace（）”而不是“ router.push（）”，因此导航不会留下历史记录</td>
</tr>
<tr role="row" data-pk="event" class="" id="__BVID__2196__row_event">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">event</code></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'click'</code></td>
<td aria-colindex="4" role="cell" class="">router-link属性：指定触发链接的事件。 在大多数情况下，应将其保留为默认值</td>
</tr>
<tr role="row" data-pk="active-class" class="" id="__BVID__2196__row_active-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active-class</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">router-link属性：配置在链接处于活动状态时应用的活动CSS类。通常，您将需要将此设置为类名称“ active”</td>
</tr>
<tr role="row" data-pk="exact" class="" id="__BVID__2196__row_exact">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">exact</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">router-link属性：默认的活动类匹配行为是包含匹配。 设置此道具将强制模式与路线完全匹配</td>
</tr>
<tr role="row" data-pk="exact-active-class" class="" id="__BVID__2196__row_exact-active-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">exact-active-class</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">router-link属性：配置当链接处于完全匹配状态时应用的活动CSS类。 通常，您将需要将此设置为类名称“active”</td>
</tr>
<tr role="row" data-pk="router-tag" class="" id="__BVID__2196__row_router-tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">router-tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'a'</code></td>
<td aria-colindex="4" role="cell" class="">router-link属性：指定要呈现的标签，它仍将监听单击事件以进行导航。“ router-tag”转换为最终渲染的路由器链接上的 tag 属性。通常，您应该使用默认值</td>
</tr>
<tr role="row" data-pk="no-prefetch" class="" id="__BVID__2196__row_no-prefetch">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-prefetch</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">nuxt-link属性：为了提高 Nuxt.js 应用程序的响应速度，当链接将显示在视口中时，Nuxt.js 将自动预取代码拆分页面。设置“不预取”将禁用特定链接的此功能</td>
</tr>
<tr role="row" data-pk="variant" class="" id="__BVID__2196__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于组件</td>
</tr>
</tbody>
</table>
</div>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item&gt;</code> 支持生成 <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;router-link&gt;</code> 或 <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;nuxt-link&gt;</code> 组件（如果使用Nuxt.js）。 有关路由器链接（或nuxt链接）特定道具的更多详细信息，请参阅 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/reference/router-links" class="alert-link" target="_self">Router support</a>（路由支持）参考部分。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-item-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-item-events" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-item-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2223">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="click" class="" id="__BVID__2223__row_click">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">click</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""> <span data-v-866a22e8="">Native click event object（本机点击事件对象）</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">单击项目时发出。</td>
</tr>
</tbody>
</table>
</div>
</article>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-dropdown-item-button" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-dropdown-item-button&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-item-button" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-item-button" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/dropdown/dropdown-item-button.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-item-button-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item-button&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-item-button-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item-button&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-item-button-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item-button&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-item-button-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-item-button-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-item-button-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item-button&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-item-btn&gt;</code></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dd-item-button&gt;</code></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dd-item-btn&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。</p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-item-button-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-item-button-props" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-item-button-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2239">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="active" class="" id="__BVID__2239__row_active">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“ true”时，使用有效样式将组件置于活动状态</td>
</tr>
<tr role="row" data-pk="active-class" class="" id="__BVID__2239__row_active-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active-class</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'active'</code></td>
<td aria-colindex="4" role="cell" class="">router-link属性：配置在链接处于活动状态时应用的活动CSS类。 通常，您将需要将此设置为类名称“active”</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__2239__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“ true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="variant" class="" id="__BVID__2239__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于组件</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-item-button-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-item-button-events" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-item-button-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2253">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="click" class="" id="__BVID__2253__row_click">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">click</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""> <span data-v-866a22e8="">Native click event object（本机点击事件对象）</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">单击按钮项时发出。</td>
</tr>
</tbody>
</table>
</div>
</article>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-dropdown-divider" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-dropdown-divider&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-divider" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-divider" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/dropdown/dropdown-divider.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-divider-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-divider&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-divider-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-divider&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-divider-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-divider-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-divider-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-divider&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dd-divider&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-divider-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-divider-props" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-divider-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2270">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__2270__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'hr'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的HTML标签，而不是默认标签</td>
</tr>
</tbody>
</table>
</div>
</article>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-dropdown-form" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-dropdown-form&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-form" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-form" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/dropdown/dropdown-form.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-form-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-form&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-form-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-form&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-form-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-form-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-form-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-form&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dd-form&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-form-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-form-props" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-form-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2288">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__2288__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="inline" class="" id="__BVID__2288__row_inline">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">inline</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，表单将处于内联模式，在单个水平行上显示标签，表单控件和按钮</td>
</tr>
<tr role="row" data-pk="novalidate" class="" id="__BVID__2288__row_novalidate">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">novalidate</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将禁用表单中控件上的浏览器本机 HTML5 验证</td>
</tr>
<tr role="row" data-pk="validated" class="" id="__BVID__2288__row_validated">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">validated</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，在表单上添加 Bootstrap 类“已验证”，触发本机浏览器验证状态</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__2288__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“ true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="form-class" class="" id="__BVID__2288__row_form-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">form-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.2.0+</span></td>
<td aria-colindex="2" role="cell" class="">String 或 Object 或 Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）添加到表单</td>
</tr>
</tbody>
</table>
</div>
</article>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-dropdown-text" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-dropdown-text&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-text" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-text" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/dropdown/dropdown-text.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-text-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-text&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-text-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-text&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-text-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-text-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-text-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-text&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dd-text&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-text-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-text-props" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-text-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2311">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__2311__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'p'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的 HTML 标签，而不是默认标签</td>
</tr>
<tr role="row" data-pk="variant" class="" id="__BVID__2311__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于组件</td>
</tr>
</tbody>
</table>
</div>
</article>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-dropdown-group" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-dropdown-group&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-group" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-group" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/dropdown/dropdown-group.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-group-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-group&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-group-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-group&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-group-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-group&gt;</code> 插槽 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-group-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-group-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-group-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-group&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dd-group&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-group-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-group-props" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-group-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2330">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__2330__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="header" class="" id="__BVID__2330__row_header">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在标题中的文本内容</td>
</tr>
<tr role="row" data-pk="header-tag" class="" id="__BVID__2330__row_header-tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'header'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的HTML标签，而不是标头的默认标签</td>
</tr>
<tr role="row" data-pk="header-variant" class="" id="__BVID__2330__row_header-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于标头</td>
</tr>
<tr role="row" data-pk="header-classes" class="" id="__BVID__2330__row_header-classes">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-classes</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）添加到标题</td>
</tr>
<tr role="row" data-pk="aria-describedby" class="" id="__BVID__2330__row_aria-describedby">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-describedby</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">为该组件提供其他上下文的元素的 ID 。 用作“aria- describeby”属性的值</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-group-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-group-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-group-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__2346">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="header" class="" id="__BVID__2346__row_header">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header</code></td>
<td aria-colindex="2" role="cell" class="">下拉组的可选标题内容。</td>
</tr>
</tbody>
</table>
</div>
</article>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-dropdown-header" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-dropdown-header&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-header" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-header" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/dropdown/dropdown-header.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-header-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-header&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-dropdown-header-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-header&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-header-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-header-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-header-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dropdown-header&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-dd-header&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-dropdown-header-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/dropdown#comp-ref-b-dropdown-header-props" class="anchorjs-link" aria-labelledby="comp-ref-b-dropdown-header-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2362">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__2362__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="tag" class="" id="__BVID__2362__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'header'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的HTML标签，而不是默认标签</td>
</tr>
<tr role="row" data-pk="variant" class="" id="__BVID__2362__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于组件</td>
</tr>
</tbody>
</table>
</div>
</article>
<article class="bd-content">
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/dropdown#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2376">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-dropdown&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BDropdown</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-dropdown-item&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BDropdownItem</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-dropdown-item-button&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BDropdownItemButton</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-dropdown-divider&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BDropdownDivider</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-dropdown-form&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BDropdownForm</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-dropdown-text&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BDropdownText</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-dropdown-group&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BDropdownGroup</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-dropdown-header&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BDropdownHeader</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight">
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BDropdown } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-dropdown'</span>, BDropdown)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/dropdown#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__2393">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">DropdownPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { DropdownPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(DropdownPlugin)</pre></figure>
</article>
























</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
